<template>
    <page-header-wrapper :title="false">
      <a-card
       title="组员审核列表"
      >
<!--        <div class="table-page-search-wrapper">-->
<!--          <a-form-model :model="queryParam" layout="inline">-->
<!--            <a-row :gutter="20">-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="提交时间">-->
<!--                  <a-range-picker @change="onChange" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="顾问">-->
<!--                  <a-input v-model="queryParam['filter[adviser_name]']" placeholder="搜索顾问姓名" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <template v-if="advanced">-->
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-model-item label="提交时间">-->
<!--                    <a-range-picker v-model="queryParam.updated_at" @change="onSubmitTime" />-->
<!--                  </a-form-model-item>-->
<!--                </a-col>-->
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-model-item label="审核状态">-->
<!--                    <a-select-->
<!--                      v-model="queryParam['filter[check_status]']"-->
<!--                      @change="statusChange"-->
<!--                    >-->
<!--                      <a-select-option v-for="(item, index) in checkStatus" :key="index" :value="index">{{item}}</a-select-option>-->
<!--                    </a-select>-->
<!--                  </a-form-model-item>-->
<!--                </a-col>-->
<!--              </template>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">-->
<!--                  <a-button type="primary" @click="$refs.table.refresh()">查询</a-button>-->
<!--                  <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>-->
<!--                  <a @click="toggleAdvanced" style="margin-left: 8px">-->
<!--                    {{ advanced ? '收起' : '展开' }}-->
<!--                    <a-icon :type="advanced ? 'up' : 'down'"/>-->
<!--                  </a>-->
<!--                </span>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-form-model>-->
<!--        </div>-->
        <s-table
          bordered
          ref="table"
          :rowKey="(record) => record.uid"
          :columns="checkColumns"
          :data="checkData"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <div slot="status" slot-scope="text, record">
            <a-button
              size="small"
              :type="record.check_status == 0 ? 'default' : (record.check_status == 3 ? 'danger' : 'primary')"
              :class="record.check_status == 0 ? 'not' : ''"
              @click="getMemberStatus(record.uid)"
            >
              {{record.check_status_format}}
              <a-icon type="form"></a-icon>
            </a-button>
          </div>
          <template slot='group_type' slot-scope='text'>
            {{text === 'pt' ? '专利' : text === 'sh' ? '售后' : '商标'}}
          </template>
          <div slot="action" slot-scope="text, record">
            <a-button size="small" type="primary" @click="toDetail(record.uid)">详情</a-button>
          </div>
          <div
            slot="filterSelect"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-select
              show-search
              style="width: 188px; margin-bottom: 8px; display: block;"
              :placeholder="`选择${column.title}`"
              :value="selectedKeys[0]"
              :filter-option="filterOption"
              @change="(value) => setSelectedKeys(value ? [value] : [])"
              @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <div
            slot="filterRange"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-range-picker
              style="width: 228px; margin-bottom: 8px; display: block;"
              :value="createValue"
              @change="onChange"
              @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 110px; margin-right: 8px"
              @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot="updated_at" slot-scope="text">
            {{text * 1000 | moment}}
          </template>
        </s-table>
      </a-card>
      <a-modal
        title="编辑审核状态"
        v-model="visible"
        @ok="onSubmit"
        @cancel="resetModal"
      >
        <a-form-model
          ref="form"
          :model="passForm"
          :rules="passRules"
        >
          <a-form-model-item label="入职时间" extra="是否更改入职，不填默认为审核通过的日期" prop="hiredate">
            <a-date-picker
              v-model="passForm.hiredate"
              valueFormat="YYYY-MM-DD"
              @change="onDefaultDate"
            >
            </a-date-picker>
          </a-form-model-item>
          <a-form-model-item>
            <a-radio-group name="passRadio" v-model="passForm.check_status">
              <a-radio v-for="(item, index) in checkStatus" :key="index" :value="index" @change='radioChange'>
                {{item}}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item prop="check_note">
            <a-textarea
              v-model="passForm.check_note"
              :rows="5"
              placeholder="备注，必须填写审核备注"
              allow-clear
            />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </page-header-wrapper>
</template>

<script>
  import moment from 'moment'
  import { STable } from '@/components'
  import { getCheckList, getStatus, setStatus } from '@/api/member'
  import col from '@/columns/member'
  const checkColumns = col.check
  export default {
    components: {
      STable
    },
    name: 'MemberCheck',
    data () {
      return {
        checkColumns,
        checkData: parameters => {
          return getCheckList(Object.assign(parameters, this.queryParam)).then(res => {
            this.adviserOpts = res.result.adviser_array
            return res.result
          })
        },
        visible: false,
        passForm: {
          hiredate: 'null',
          check_status: '',
          check_note: ''
        },
        passRules: {
          hiredate: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
          check_note: [{ required: true, message: '请选输入入职备注', trigger: 'blur' }]
        },
        defaultDate: '',
        searchText: '',
        searchInput: null,
        searchedColumn: '',
        advanced: false,
        queryParam: {},
        checkStatus: [],
        adviserOpts: {},
        createValue: []
      }
    },
    methods: {
      moment,
      onChange (date, dateString) {
        this.createValue = date
        this.queryParam['filter[updated_at_start]'] = dateString[0]
        this.queryParam['filter[updated_at_end]'] = dateString[1]
      },
      onSubmit () {
        const app = this
        const passForm = {}
        app.$refs.form.validate(valid => {
          if (valid) {
            passForm.uid = app.passForm.uid
            for (const k in app.passForm) {
              if (k !== '') {
                if (k !== 'uid') {
                  passForm['info[' + k + ']'] = app.passForm[k]
                }
              }
            }
            app.setMemberStatus(passForm)
            app.visible = false
            app.$refs.table.refresh()
          } else {
            return false
          }
        })
      },
      toDetail (uid) {
        this.$router.push({ name: 'CheckDetail', params: { uid: uid } })
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[updated_at_start]']
        delete this.queryParam['filter[updated_at_end]']
        this.$refs.table.refresh(true)
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onHiredate (date, dateString) {
        this.passForm.hiredate = ''
        this.passForm.hiredate = dateString
      },
      onSubmitTime (date, dateString) {
        for (let i = 0; i < dateString.length; i++) {
          if (i === 0) {
            this.queryParam['filter[updated_at_start]'] = dateString[i]
          }
          if (i === 1) {
            this.queryParam['filter[updated_at_end]'] = dateString[i]
          }
        }
      },
      statusChange (e) {
        this.queryParam['filter[check_status]'] = e
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      getMemberStatus (uid) {
        const app = this
        getStatus(uid).then(res => {
          const result = res.result.info
          app.checkStatus = res.result.check_status_opts
          app.passForm = result
          // if (app.passForm.hiredate !== '') {
          //   app.passForm.hiredate = moment(result.hiredate, 'YYYY-MM-DD')
          // }
          app.passForm.uid = uid
          app.visible = true
        })
      },
      onDefaultDate (date, dateString) {
        this.passForm.hiredate = dateString
      },
      setMemberStatus (form) {
        setStatus(form).then(res => {
          if (res.status === 0) {
            this.visible = false
            this.$refs.table.refresh()
          }
        })
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      resetModal () {
        this.passForm = {}
      },
      radioChange () {
        this.passForm.check_note = ''
      }
    }
  }
</script>

<style scoped>

</style>
